


<template>
  <div class="home-page" v-show="userId">
    <van-nav-bar
      title="商品信息"
      right-text="个人中心"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-swipe :autoplay="3000" indicator-color="white" 　class="banner">
      <van-swipe-item v-for="(item,index) in imgList" :key="index">
        <img :src="item" alt style="width:100%;height:200px">
      </van-swipe-item>
      <!-- <van-swipe-item>
                <img src="./../common/images/1.jpg"  alt="">
      </van-swipe-item>-->
      <!--  <van-swipe-item>
                <img src="./../common/images/5.jpg"  alt="">
      </van-swipe-item>-->
    </van-swipe>
    <div class="home-head">
      <div class="home-title">{{product.name}}</div>
      <div class="home-tips">{{product.descript}}</div>
      <div class="home-rent">芝麻信用免押使用：￥00</div>
      <div class="home-sale">官方售价：￥ {{product.price}}</div>
    </div>
    <div class="home-form">
      <div class="home-line">基础信息</div>
      <van-cell-group>
        <van-field
          v-model="username"
          required
          clearable
          maxlength="10"
          label="姓名"
          placeholder="请输入姓名"
        />
        <van-field
          v-model="phone"
          type="phone"
          label="手机号码"
          placeholder="请输入手机号码"
          required
          maxlength="11"
        />
      </van-cell-group>
      <div class="home-line">邮寄地址</div>
      <van-cell-group>
        <van-cell placeholder="选择省市" required title="选择省市" v-model="city" @click="showPopup"/>
      </van-cell-group>
      <van-cell-group>
        <van-field
          type="textarea"
          v-model="address"
          required
          clearable
          maxlength="80"
          label="详细地址"
          placeholder="详细地址"
        />
      </van-cell-group>
      <van-popup v-model="show" position="bottom">
        <van-area :area-list="areaList" @confirm="onAddrConfirm" @cancel="onAddrCancel"/>
      </van-popup>
      <div class="buttonDiv">
        <van-button round size="large" type="primary" @click="submit">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import AddressList from "@/common/js/area";
import { Dialog } from "vant";
import axios from "axios";
import { Toast } from "vant";

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      money: "",
      validDay: "10",
      username: "",
      phone: "",
      show: false,
      areaList: AddressList,
      city: "请选择省市",
      address: "",
      imgList: [""],
      product: {},
      apiFlagJson:{
        sdk:false,
        tradePaySuccess:false,
        tradePayFaiure:false
      },
      userId:null
    };
  },
  mounted() {
    this._initFn();
  },
  methods: {
    pageClose() {
      var userAgent = navigator.userAgent;
      if (
        userAgent.indexOf("Firefox") != -1 ||
        userAgent.indexOf("Chrome") != -1
      ) {
        window.location.href = "about:blank";
      } else if (
        userAgent.indexOf("Android") > -1 ||
        userAgent.indexOf("Linux") > -1
      ) {
        window.opener = null;
        window.open("about:blank", "_self", "").close();
      } else {
        window.opener = null;
        window.open("about:blank", "_self");
        window.close();
      }
    },
    onClickLeft() {
      // Toast('返回');
      //当前关闭页面
      this.pageClose();
    },
    onClickRight() {
      // Toast('个人中心');
      window.location.href = process.env.API_ROOT+'gateway/login/'+this.product.alipayLifeId;
      // this.$router.push({ path: "/center" });
    },
    //查后面得到商品信息
    goodsQuery() {
      let productId = this.$route.query.productId;
      let salesId = this.$route.query.salesId;
      let userId = this.$route.query.userId;

      if (!productId || !salesId) {
        this.$toast.fail("参数不正确");
         this.pageClose();
        return;
      }
      if(userId){
          this.userId = userId;
          this.get("order/getConfig/" + productId + "/" + salesId).then(res => {
          var data = res.data;
          if (this.checkIsSsuccess(res)) {
            let product = data.data;
            this.product = product;
            this.imgList.push(product.img);
          } else {
            let msg = data.msg;
            this.$toast.fail(msg);
          

              setTimeout(() => {
                          this.pageClose();
                          }, 1000);
          }
        });
      }else{
         window.location.href= process.env.API_ROOT+'gateway/login/'+productId+"/"+salesId+"/1";
      }
    },
    _initFn() {
      this.imgList = [];

      this.goodsQuery();
    },
    showPopup() {
      this.show = true;
    },
    onAddrConfirm(val) {
      this.show = false;
      this.city = val[0].name + val[1].name + val[2].name;
    },
    onAddrCancel() {
      this.show = false;
    },
    submit() {
      this.city;
      if (this.username.length <= 0) {
        Toast("请输入姓名");
      } else if (this.phone.length <= 0) {
        Toast("请输入手机号码");
      } else if (!this.checkMobile(this.phone)) {
        Toast("请输入正确手机号码");
      } else if (this.city.length <= 0||this.city == '请选择省市') {
        Toast("请选择省市");
      } else if (this.address.length <= 0) {
        Toast("请输入详细地址");
      } else {
        let str = "";
        str =
          "您确认申请" +
          this.product.name +
          ",如" +
          this.product.activationTime +
          "天内没有使用则收取" +
          this.product.price +
          "元。";
      this.getLicensing();
        // this.$dialog
        //   .confirm({
        //     title: "提示",
        //     message: str,
        //     confirmButtonText: "确定", //改变确认按钮上显示的文字
        //     cancelButtonText: "取消" //改变取消按钮上显示的文字
        //   })
        //   .then(() => {
        //     // this.$toast.success('成功文案');
        //     // 确认按钮
           
        //   })
        //   .catch(() => {
        //     //取消按钮
        //   });
      }
    },
    checkMobile(str) {
      //判断是否正常手机号码
      var re = /^1\d{10}$/;
      // var re = /^[1][0-9]{9}$/;
      return re.test(str);
    },
    getLicensing() {
        var dev =   this.checkEnv();
      // if(dev){
      //     this.callAp({"id":"ff8080816bf8880f016bfaeb507a000f"});
      // }else{
         let params = {
        "productId":this.product.id,
        salesId:this.$route.query.salesId,
        username:this.username,
        address:this.address,
        phone:this.phone,
        city:this.city,
        userId:this.userId
      }
      if(this.apiFlagJson.sdk){
        return;
      }
      this.apiFlagJson.sdk=true;
      this.post("order/getLicensing/" + this.product.id,params)
        .then(resp => {
                this.apiFlagJson.sdk=false;

            if(this.checkIsSsuccess(resp)){
                //  let order = resp.data.data;
                 this.callAp(resp.data.data);
            }else {
                let msg = resp.data.msg;
                this.$toast.fail(msg);
            }
        })
        .catch(() => {
              this.apiFlagJson.sdk=false;

        });
        // }
    },tradePaySuccess(params){
         if(params.freezeStatus=='9000'||params.freezeStatus=='8000'){
            this.post("order/tradePaySuccess",params)
              .then(resp => {
                  if(this.checkIsSsuccess(resp)){
                      //  let order = resp.data.data;
                      this.$toast.success('订单提交完成');
                        // this.pageClose();
                        // this.getLicensing();
                        setTimeout(() => {
                          this.onClickRight();
                        }, 1000);
                  }else {
                      let msg = resp.data.msg;
                      this.$toast.fail(msg);
                  }
              })
              .catch(() => {});
         }else{
              var url = 'order/tradePayCancel';
              this.post(url,params)
              .then(resp => {
                 
              })
              .catch(() => {});
         }

    },callAp(data){
      let orderStr = data.url;
      let id = data.id;
      var dev =   this.checkEnv();
      let params = {
        "orderId":id,
        "productId":this.product.id,
        salesId:this.$route.query.salesId,
        username:this.username,
        address:this.address,
        phone:this.phone,
        city:this.city,
      }
      if(dev){
        params.freezeStatus = '9000';
          this.tradePaySuccess(params);
      }else{
        let _obj = this;
         ap.tradePay(
                    {
                    // orderStr:
                    //     "alipay_sdk=alipay-sdk-java-3.7.89.ALL&app_id=2019061265539076&biz_content=%7B%22amount%22%3A%2210%22%2C%22extra_param%22%3A%22%7B%5C%22category%5C%22%3A%5C%22POSTPAY_HARDWARE%5C%22%7D%22%2C%22order_title%22%3A%22title%22%2C%22out_order_no%22%3A%22oon18024518024518qdgv%22%2C%22out_request_no%22%3A%22oren180245180245761auw%22%2C%22payee_user_id%22%3A%222088531450700210%22%2C%22product_code%22%3A%22PRE_AUTH_ONLINE%22%7D&charset=utf-8&format=json&method=alipay.fund.auth.order.app.freeze&sign=CTq9x04f%2B1hG2D0wDIPUOfv3dYHoAhciUzsjAHyTkTiMB70ZPzVwII%2FaITjrde4xGekjeXA0Pz7fcsRZ7BnxWcc6uS6b5eqWLV%2FeG%2FM1nsmbmBkFcvLAt9izQLMEO%2BVXq950B3jylOTgPAAIZi%2FR0R8xyt%2FQNTHHbsTIBCyIqwADGWVwjAUjgfRmto6piBPUu3nDMGGqpTNmkewmHqB34h6U6xP%2B%2F3uwnFh7fc0VLiHYUl3NjkeHbcX37gKITFr6o0zarxSBMVDK9hBP9Y%2BhgWHcxMywUHpaFK6aAqW1%2BhTDWauvjHsx%2BQVkvKcW33ml80PyUw%2Fu6OnP9pJRmuALRQ%3D%3D&sign_type=RSA2&timestamp=2019-07-06+18%3A02%3A45&version=1.0"
                    orderStr:orderStr
                    },
                    function(res) {
                       let resultCode = res.resultCode;
                      //  if(resultCode=='9000'||resultCode=='8000'){
                            params.freezeStatus = resultCode;
                            _obj.tradePaySuccess(params);
                      //  }else{
                          // ap.alert(resultCode);
                      //  }
                           
                     
                    }
                );
      }
    }
  }
};
</script>

<style scoped>
.home-page {
  width: 100%;
  overflow: hidden;
}
.banner {
  width: 100%;
  display: block;
}
.home-head {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #e4e9f0;
  padding: 10px;
  box-sizing: border-box;
  line-height: 25px;
  background: #fff;
}
.home-title {
  font-size: 16px;
}
.home-tips {
  background: #fd5a53;
  padding: 3px 5px;
  color: #fff;
  margin: 5px 0;
}
.home-rent {
  font-size: 20px;
  color: #02aa91;
}
.home-sale {
  font-size: 16px;
}
.home-form {
  width: 100%;
  overflow: hidden;
}
.home-line {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #f8f8f8;
  padding: 0 10px;
  box-sizing: border-box;
}
.buttonDiv {
  margin: 20px 10px;
}
</style>

